<template>
  <el-dialog
    :visible="showDialog"
    :title="this.id ? '编辑用户': '创建用户'"
    @close="btnCancel"
  >
    <el-form ref="addCompany" label-width="150px" :model="formData" :rules="rules" >
      <el-form-item prop="shortName" label="企业名称">
        <el-input type="text" v-model="formData.shortName" style="width: 80%" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="isFamous">
        <el-checkbox label="是否为名企" v-model="formData.isFamous" />
      </el-form-item>
      <el-form-item prop="company" label="所属公司">
        <el-input type="text" v-model="formData.company" style="width: 80%" />
        <div>https://www.tianyancha.com （在此可查询所属公司全称及简称）</div>
      </el-form-item>
      <el-form-item prop="province" label="城市地区">
        <el-select placeholder="请选择" v-model="formData.province" @change="cityChange">
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.label" />
        </el-select>
        <el-select placeholder="请选择" v-model="formData.city">
          <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.label"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="tags" label="方向(企业标签)">
        <el-input type="text" v-model="formData.tags" style="width: 80%" />
      </el-form-item>
      <el-form-item prop="remarks" label="备注">
        <el-input
          type="textarea"
          v-model="formData.remarks"
          style="width: 80%"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-row type="flex" justify="center">
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button type="primary" size="small" @click="btnOK">确定</el-button>
          </el-row>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { AddCompany, ReviseCompany } from '@/api/hmmm/companyszs'
import cityData from '@/api/hmmm/citys.json'
export default {
  name: 'CompanysAdd',
  props: {
    showDialog: {
      type: Boolean,
      default: true
    },
    id: {
      type: Number
    }
  },
  data () {
    return {
      formData: {
        isFamous: true, // 是否为名企
        shortName: '', // 企业简称
        company: '', // 所属公司
        province: '', // 城市
        city: '', // 地区
        tags: '', // 标签
        remarks: '' // 备注
      },
      rules: {
        shortName: [{ required: true, message: '企业简称不能为空', trigger: 'blur' }],
        company: [{ message: '所属公司不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      },
      cityList: [],
      areaList: [],
      cityIndex: 0,
      isshowchecked: false
    }
  },
  created () {
    cityData.data.map((v, i) => {
      this.cityList.push({ label: v.city, value: i })
    })
  },
  methods: {
    cityChange (key) {
      this.cityList.map(item => {
        if (item.label === key) {
          this.cityIndex = item.value
          this.formData.city = cityData.data[this.cityIndex].area[0]
        }
      })
      this.areaList = []
      //   this.formData.city = ""
      cityData.data[this.cityIndex].area.map((v, i) => {
        this.areaList.push({ label: v, value: i })
      })
    },
    // 确定按钮
    async btnOK () {
      await this.$refs.addCompany.validate()
      if (this.id) {
        this.formData.isFamous = true
        await ReviseCompany(this.formData)
        this.$message.success('修改成功')
      } else {
        await AddCompany(this.formData)
        this.$message.success('添加成功')
      }
      // await AddCompany(this.formData)
      this.$parent.CompanyList()
      this.$parent.showDialog = false
    },
    //  取消按钮
    btnCancel () {
      this.formData = {
        name: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      }
      this.$refs.addCompany.resetFields()
      this.$parent.showDialog = false
    }
  }
}
</script>

<style scoped lang='less'></style>
